<template>
	<view class="me-header" style="background: linear-gradient(180deg,#0081ff,#069cff 10%,rgba(255,214,41,.01) 90%);
}">
		<view class="" style="padding-top: 100rpx;">
			<view class="header-box shadow">
				<view class="" v-if="uni_id_token">
					<view class="img-box">
						<!-- {{user.avatar}} -->
						<image style="width: 134rpx;height: 134rpx;border-radius: 50%;" :src="user.avatar" mode="">
						</image>
						<!-- <image src="/static/default.jpg" mode=""></image> -->
					</view>
					<view class="" style="height: 40rpx;">

					</view>
					<view class="" style="font-size: 33rpx;font-weight: bold;text-align: center;">
						{{user.nickname || 0}}
					</view>

					<view class="">
						<view class="d-flex a-center j-sa mt-2 pd20">
							<view class="radius  bg-blue j-center a-center d-flex "
								style="background:#fff; width: 40%;height: 50rpx;">
								<view class="font-30" style="color: #000;">
									可提现：
								</view>
								<view class="font-36" style="color: #038eff;">
									{{user.money || 0}}
								</view>
							</view>

							<view class=" bg-blue j-center a-center d-flex "
								style="background:#fff; width: 40%;height: 50rpx;">
								<view class="font-30" style="color: #000;">
									总收益：
								</view>
								<view class="font-36" style="color: #038eff;">
									{{user.money || 0}}
								</view>
							</view>




						</view>

						<view class="pd20 d-flex a-center j-sb mt-2 text-center ">
							<view class="d-flex a-center j-sa">
								<view class="font-27 color-hui">
									今日预估：
								</view>
								<view class="font-30  font-weight-bold theme-color-lan">
									{{numData.today_money_num || 0}}
								</view>

							</view>
							<view class="d-flex a-center">
								<view class="font-27 color-hui">
									昨日收益：
								</view>
								<view class="font-30  font-weight-bold theme-color-lan">
									{{numData.yesterday_money_num || 0}}
								</view>

							</view>
							<view class="">
								<view @tap="toWithdraw" class="d-flex a-center j-center"
									style="border-radius: 20rpx; height: 60rpx;color: #fff; width: 160rpx;background: #2cabff;">
									我的钱包
								</view>
							</view>
						</view>

					</view>

				</view>
				<view class="" style="position: absolute;top: 67rpx;left: -28rpx;" v-else>
					<view class="not-login-container">
						<!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
						<!-- <button @click="getUserInfo" class="accredit-button" size="mini">
							<image style="width: 48rpx;height: 48rpx;" class="margin-right-xs"
								src="../../static/huiyuan/weixin.png"></image> 微信登录
						</button> -->
						<!-- #endif -->
						<!-- #ifdef APP-PLUS || H5 -->
						<button @click="toLogin" class="accredit-button" size="mini">
							登录注册
						</button>
						<!-- #endif -->

						<!-- <button @click="toLogin" class="accredit-button" size="mini">
							登录注册
						</button> -->


					</view>
				</view>



			</view>
			<view class="mt-2 shadow">
				<!-- {{advertisingOpen}} -->
				<view class="me-op3-wrapper">
					<view class="me-op3">
						<!-- #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO -->
						<view bindtap="copy" class="me-op-item">
							<!-- <button class="contact-btn" id="btnShare0" openType="contact" plain="true" size="mini"
								type="warn"></button> -->
							<view class="me-op-item-title flex-start">

								<image src="">
								</image>
								<button class="contacButton" openType="contact">咨询在线客服</button>
							</view>
							<view class="">
								>
							</view>
						</view>
						<!-- #endif -->
						<view @tap="fuzhi" class="me-op-item">
							<view class="me-op-item-title flex-start">
								<image src="">
								</image>
								联系客服
							</view>
							<view class="">
								>
							</view>
						</view>
						<!-- #ifdef APP-PLUS || H5 -->
						<!-- 	<view @tap="toGetVip" class="me-op-item" v-if="vipConfig.advertisingOpen == 1">
							<view class="me-op-item-title flex-start">
								<image src="/static/huiyuan/renwu2.png"></image>
								开启VIP特权
							</view>
							<view class="">
								>
							</view>
						</view> -->
						<!-- #endif -->
						<!--  v-if="vipConfig.advertisingOpen == 1 || vipConfig.shareStimulate == 1 " -->
						<view @tap="kanguangao1Btn" class="me-op-item">
							<view class="me-op-item-title flex-start">
								<image src=""></image>
								奖励中心
							</view>
							<view class="">
								>
							</view>
						</view>
						<view @tap="fuzhi" class="me-op-item">
							<view class="me-op-item-title flex-start">
								<image src="">
								</image>
								我也想要这样的程序
							</view>
							<view class="">
								>
							</view>
						</view>
						<!-- 	<view @tap="kanguangao1Btn" class="me-op-item" v-if="vipConfig.advertisingOpen == 1">
							<view class="me-op-item-title flex-start">
								<image src="/static/huiyuan/renwu2.png"></image>
								看广告开启VIP特权
							</view>
							<view class="">
								>
							</view>
						</view> -->
						<!-- #ifdef MP-WEIXIN -->
						<!-- 	<view @tap="kanguangao" class="me-op-item" v-if="vipConfig.advertisingOpen == 1">
							<view class="me-op-item-title flex-start">
								<image src="/static/huiyuan/renwu2.png"></image>
								看广告清爽一天
							</view>
							<view class="">
								>
							</view>
						</view> -->
						<!-- #endif -->

						<view @tap="qingchc" class="me-op-item">
							<view class="me-op-item-title flex-start">
								<image src="/static/huiyuan/renwu2.png"></image>
								清除缓存
							</view>
							<view class="">
								>
							</view>
						</view>

						<!-- <view bindtap="copy" class="me-op-item" data-s="{{system.wx}}" wx:if="{{diy.wxhkai==0}}">
				                    <view class="me-op-item-title flex-start">
				                        <image src="{{diy.weixinhimg}}"></image>
				                        {{diy.weixinhwode}}
				                    </view>
				                    <text class="tishiwenzi">{{system.wx}}</text>
				                    <image src="../../resource/dy.png"></image>
				                </view> -->
						<!-- <view bindtap="{{isAuthorize?'tishi':'gdxcx'}}" class="me-op-item" wx:if="{{diy.gdxcxkai==0}}">
				                    <view class="me-op-item-title flex-start">
				                        <image src="{{diy.gdxcximg}}"></image>
				                        {{diy.gdxcxwz}}
				                    </view>
				                    <image src="../../resource/dy.png"></image>
				                </view> -->

					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import {
		mixinAdvertising
	} from '@/mixin/advertising.js'
	import {
		login
	} from '@/mixin/login.js'
	import {
		advertisingData11
	} from "@/mixin/advertisingData1.js"
	export default {
		mixins: [login, mixinAdvertising, advertisingData11],
		data() {
			return {
				uni_id_token:"",
				user: {},
				openId: '',
				vipName: '',
				userDate: "",
				userDate1: "",
				vipConfig: {},
				numData: {}
			}
		},

		onShow() {
			// this.init()

			var uni_id_token = uni.getStorageSync('uni_id_token')
			if (uni_id_token) {
				this.getNum();
				this.getNumAll()
			}



		},
		onLoad() {},
		methods: {
			toWithdraw() {
				uni.navigateTo({
					url: "/pages/my/withdraw/withdraw"
				})
			},
			getNumAll() {
				var user = uni.getStorageSync('user')
				var data = this.$api.getUserSumNum({
					user_id:user.openid
				})
				
				this.getUser()
			
			},
			async getNum() {
				var user = uni.getStorageSync('user')
				var user = uni.getStorageSync('user')
				var data = await this.$api.getTodaySumNum({
					user_id: user.openid
				})
				this.numData = data.data
			},
			jiaqun() {
				var vipConfig = uni.getStorageSync('vipConfig')
				uni.previewImage({
					current: vipConfig.groupImg, // 当前显示图片的http链接
					urls: [vipConfig.groupImg] // 需要预览的图片http链接列表
				})
			},
			kanguangao1Btn() {
				uni.switchTab({
					url: "/pages/earnings/earnings"
				})

				// this.kanguangao1(()=>{
				// 	setTimeout(()=>{
				// 		var user = uni.getStorageSync('user')
				// 		this.user = user
				// 		this.suanTiem1()
				// 	})
				// })
			},
			suanTiem() {
				var userInfo = uni.getStorageSync('user')
				if (!userInfo) {
					return
				}

				var date = this.getTime(Number(userInfo.downloadDate))
				this.userDate = date
			},
			suanTiem1() {
				var userInfo = uni.getStorageSync('user')
				if (!userInfo) {
					return
				}

				var date = this.getTime(Number(userInfo.integral))
				this.userDate1 = date
			},
			// 时间戳计算剩余时间
			getTime(time) {

				let date = new Date(time);
				let now = new Date();
				let diff = date.getTime() - now.getTime();
				let day = Math.floor(diff / (24 * 3600 * 1000));
				let hour = Math.floor(diff / (3600 * 1000));
				let min = Math.floor(diff / (60 * 1000));
				let sec = Math.floor(diff / 1000);
				if (day > 0) {
					return day + "天";
				} else if (hour > 0) {
					return hour + "小时";
				} else if (min > 0) {
					return min + "分钟";
				} else if (sec > 0) {
					return sec + "秒";
				} else {
					return "已过期";
				}
			},
			fuzhi() {
				var vipConfig = uni.getStorageSync('vipConfig')
				uni.setClipboardData({
					data: vipConfig.wxText,
					success: function() {
						console.log('success');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contact-btn {
		display: inline-block;
		position: absolute;
		width: 100%;
		height: 40px;
		background: salmon;
		opacity: 0;
	}



	.me-op3 {
		padding: 4rpx 20rpx 0rpx;
		width: 100%;
		font-size: 28rpx;
		box-shadow: 0 0 6rpx #ccc;
		border-radius: 20rpx;
		background: #fff;
	}

	.me-op-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #eee;
	}

	.me-op-item:last-child {
		border-bottom: none;
	}

	.me-op-item image {
		width: 30rpx;
		height: 30rpx;
	}

	.me-content {
		position: relative;
		bottom: 100rpx;
	}

	.V {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: -2rpx;
		top: 90rpx;
		border-radius: 50%;
	}

	canvas {
		display: block;
		position: relative;
		width: 355px;
		height: 110px;
	}

	.contacButton {
		background-color: #fff;
		margin: 0;
		font-size: inherit;
		line-height: 40rpx;
		padding: 0;
	}

	.contacButton:after {
		border: solid #fff;
	}

	.not-login-container {
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 10%;
		z-index: 99;
	}

	.blur {
		filter: blur(6rpx);
	}

	.accredit-button {
		border: 1rpx solid;
		color: #07c160;
		font-size: 36rp;
		background-color: hsla(0, 0%, 100%, .8);
		align-items: center;
		display: inline-flex;
		letter-spacing: 2rpx;
	}

	.me-op-item-title image {
		width: 46rpx;
		height: 46rpx;
		margin-right: 10rpx;
	}

	.flex-between {
		justify-content: space-between;
	}

	.flex-around,
	.flex-between {
		display: flex;
		align-items: center;
	}

	.flex-start {
		justify-content: flex-start;
	}

	.flex-end,
	.flex-start {
		display: flex;
		align-items: center;
	}

	.gap10 {
		margin-bottom: 10rpx;
	}

	.gap10,
	.gap20 {
		box-shadow: 0 10rpx 0 #f5f6f7;
	}


	.header-box {
		padding-top: 80rpx;
		min-height: 200rpx;
		padding-bottom: 20rpx;
		background: #fff;
		position: relative;
		border-radius: 10rpx;
		border-bottom: 1rpx solid #ccc;

		.img-box {
			position: absolute;
			bottom: 69%;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 144rpx;
			height: 144rpx;
			border-radius: 50%;
			overflow: hidden;
			background: #c2cfd6;
		}
	}

	.me-header {
		padding: 30rpx;
		position: relative;
		background: linear-gradient(180deg, #ff7984, #ff7199 10%, rgba(255, 214, 41, .01) 90%);
		height: 340rpx;
		z-index: 2;
	}
</style>